<template>
  <div id="app">
    <el-container class="home_container">
      <el-header
        >Header
        <nav>
          <router-link to="print">
            <div class="logo"><img src="../assets/logo.png" /></div>
          </router-link>
          <router-link to="print">
            <div class="el-menu-item" href="#">首页</div>
          </router-link>

          <router-link to="print">
            <div class="el-menu-item" href="#">打印</div>
          </router-link>

          <div class="el-menu-item" href="https://www.baidu.com">在线压缩</div>

          <router-link to="me">
            <div class="el-menu-item">个人中心</div>
          </router-link>
          <!-- <router-link to="login"> -->
          <div class="el-menu-item" @click="logout">安全退出</div>
          <!-- </router-link> -->
          <a href="www.baidu.com">去百度</a>

          <router-link to="login">路由</router-link>
        </nav>
      </el-header>
      <el-main
        >Main
        <router-view></router-view>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Navbar",

  methods: {
    logout() {
      window.localStorage.clear()
      this.$toast.success("已安全退出")
      this.$router.push("/login")
    },
  },
};
</script>

<style lang="css" scoped>
.home_container {
  height: 100vh;
}
nav {
  display: flex;
  align-items: center;
  justify-content: center;
}
nav .el-menu-item {
  color: #409eff;
  padding: 15px 100px;
  position: relative;
  text-align: center;
  border-bottom: transparent;
  display: flex;
  transition: 0.4s;
  font-size: larger;
  font-weight: bold;
}
nav .el-menu-item:hover {
  background-color: darkgray;
  border-bottom: solid 6px;
  border-bottom-color: #409eff;
  height: 80px;
}
.logo {
  height: 25px;
}
</style>
